<template>
   <!-- <div>
        <div class="back-home"  ref="moveBtn" @mousedown="down" @touchstart="down" @mousemove="move"
             @touchmove="move" @mouseup="end" @touchend="end" @touchcancel="end">
            <el-button class="el_button"
                      size="medium" @click="showPop" type="info"  circle>菜单</el-button>
        </div>
        <van-popup  v-model="show" position="left" :style="{ height: '100%'}" >
            <div style="margin-top: 30%">
                <van-sidebar style="width: 100%" v-model="activeKey" @change="onChange">
                    <van-sidebar-item  title="首页" />
                    <van-sidebar-item  title="流量查询" />
                    <van-sidebar-item  title="充值缴费"/>
                    <van-sidebar-item  title="套餐订购" />
                    <van-sidebar-item  title="订单查询" />
                    <van-sidebar-item  title="实名认证" />
                    <van-sidebar-item  title="常见问题" />
                    <van-sidebar-item  title="修改密码" />
                </van-sidebar>
            </div>
        </van-popup>
    </div>-->

</template>

<script>
    export default {
        name:"rightBottom",
        props:{
            iccid:String,
            openid:String,
            appId:String
        },
        data() {
            return {
                activeKey:sessionStorage.getItem("activeKey")===""?"":sessionStorage.getItem("activeKey"),
                show:false,
                flags: false,
                position: {
                    x: 0,
                    y: 0
                },
                nx: '',
                ny: '',
                dx: '',
                dy: '',
                xPum: '',
                yPum: '',
                isShow: false,
                moveBtn: {}
            }
        },
        mounted() {
            this.moveBtn = this.$refs.moveBtn
        },
        methods: {
            onChange(index){
                let _this=this
                _this.activeKey=index
                sessionStorage.setItem("activeKey",_this.activeKey)
                if(_this.activeKey===0){
                    _this.goIndex()
                }else if(_this.activeKey===1){
                    _this.queryFlow()
                }else if(_this.activeKey===2){
                    _this.payBalance()
                }else if(_this.activeKey===3){
                    _this.buyPackage()
                }else if(_this.activeKey===4){
                    _this.queryOrder()
                }else if(_this.activeKey===5){
                    _this.goAuth()
                }else if(_this.activeKey===6){
                    _this.goProblem()
                }else if(_this.activeKey===7){
                    _this.goUpdpwd()
                }
            },
            goUpdpwd(){
                let _this=this
                _this.$router.push({
                    name:"updpwd",
                    params:{
                        "iccid":_this.iccid
                    },
                })
            },
            goProblem(){
                let _this=this
                _this.$router.push({
                    name:"problem",
                    params:{
                        "iccid":_this.iccid
                    },
                })
            },
            goAuth(){
                let _this=this
                if(_this.$store.state.auth==="2"){
                    _this.$toast.success("卡号已经实名")
                    return false
                }
                _this.$router.push({
                    name:"card_auth",
                    params:{
                        "iccid":_this.iccid
                    }
                })
            },
            queryOrder(){
                let _this=this
                _this.$router.push({
                    name:"order_info",
                    params:{
                        "iccid":_this.iccid
                    }
                })
            },
            payBalance(){
                let _this=this
                _this.$router.push({
                    name:"pay_balance",
                    params:{
                        "iccid":_this.iccid
                    }
                })
            },
            queryFlow(){
                let _this=this
                _this.$router.push({
                    name:"card_index",
                    params:{
                        "iccid":_this.iccid,
                        "openid":_this.openid
                    }
                })
            },
            goIndex(){
                let _this=this
                _this.$router.push({
                    name:"index",
                    params:{
                        "iccid":_this.iccid,
                        "openid":_this.openid
                    }
                })
            },
            buyPackage(){
                let _this=this
                _this.$router.push({
                    name:"packet",
                    params:{
                        "iccid":_this.iccid,
                        "openid":_this.openid
                    }
                })
            },
            showPop(){
                let _this=this
                _this.show=true
            },
            // 实现移动端拖拽
            down() {
                this.flags = true;
                var touch;
                if (event.touches) {
                    touch = event.touches[0];
                } else {
                    touch = event;
                }
                this.position.x = touch.clientX;
                this.position.y = touch.clientY;
                this.dx = this.moveBtn.offsetLeft;
                this.dy = this.moveBtn.offsetTop;
            },
            move() {
                if (this.flags) {
                    var touch;
                    if (event.touches) {
                        touch = event.touches[0];
                    } else {
                        touch = event;
                    }
                    this.nx = touch.clientX - this.position.x;
                    this.ny = touch.clientY - this.position.y;
                    this.xPum = this.dx + this.nx;
                    this.yPum = this.dy + this.ny;
                    var clientWidth = document.documentElement.clientWidth;
                    var clientHeight = document.documentElement.clientHeight;
                    if (this.xPum > 0 && this.xPum < (clientWidth - this.moveBtn.offsetWidth)) {
                        this.moveBtn.style.left = this.xPum + "px";
                    }
                    if (this.yPum > 0 && this.yPum < (clientHeight - this.moveBtn.offsetHeight)) {
                        this.moveBtn.style.top = this.yPum + "px";
                    }

                    //阻止页面的滑动默认事件
                    document.addEventListener("touchmove", this.handler, {
                        passive: false
                    });
                }
            },
            //鼠标释放时候的函数
            end() {
                this.flags = false;
                document.addEventListener('touchmove', this.handler, {
                    passive: false
                });
            },
            handler(e) {
                if(this.flags){
                    event.preventDefault();
                }else{
                    return true
                }
            }
        }
    }
</script>

<style scoped>
    .back-home {
        height: 3rem;
        width: 3rem;
        position: absolute;
        right: 0;
        bottom:22%;
        z-index: 99999;
    }

    .back-home .el_button {
        height: 100%;
        width: 100%;
        box-shadow:#4768f3 0px 0px 10px;
    }
</style>

